<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>test</title>
	<script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="js/vue-resource.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <style>
			.aniTime{   
              /*修改动画默认配置*/
			  animate-duration: 2s;   /*动画持续时间*/
			  -webkit-animation-duration: 2s; /*动画持续时间*/
			  /*	animate-delay: 1s;    /*延迟多少时间执行动画*/
			  /* -webkit-animation-delay: 1s; /*延迟多少时间执行动画*/
				/*animate-iteration-count: 2;    /*动画执行次数*/
			   /*-webkit-animate-iteration-count: 2;  /*动画执行次数*/
			}
   </style>
</head>
<body>
	  <div id="app" class='container'>	  
	   <h1>vue-router 数据加载</h1>
	      <p>{{ message }}</p>
	       <router-link to="/one">点击跳转到一</router-link>
	       <router-link to="/two">点击跳转到二</router-link>
	       <router-link to="/three">点击跳转到三</router-link>
	       <router-view style='margin-top:10px;'></router-view>
	        
         
	  </div>
</body>
</html>
<script>
var luyou = new VueRouter({
    routes : [
              {
            	  path : "/one",
            	  components : {
            		  default : {
            			  template : " <div style='border:2px solid #000; padding:15px; background:f7f7f7; position:relative;' ><ul class='list-group' style='margin:0;'><li v-for='valueli in li' class='list-group-item'>{{ valueli }}</li></ul><div class='loading'  v-if='loading' style='width:200px; margin:0 auto; padding:10px; border-radius:10px; border:1px solid #333;   background: #000; color:#fff;'>Loading...</div></div>",
            		     data: function(){
            		    	 return {
            		    		 loading: true,
            		    	     li: [],
            		    	     error: null
            		    	 }
            		     },
            		     created :function(){
            		    	 this.fetchData();
            		     },
            		     methods:{
            		    	 fetchData:function(){
            		    	    this.loading = true; //显示加载中
            		     		this.$http({
            		    			url : "getlist.php",  //发送地址
            		    			method: "post",  //发送方法
            		    			body: {   //发送参数 不带尾巴 适合post
            		    				"token" : "15819588170"
            		    			},
            		    			emulateJSON:true	  //局部开启 post方式必须开启cont-type
            		    		}).then(function(response){
            		    			this.loading = false; //关闭加载中
            		    		    var jsondata  =  JSON.parse(response.data);  
            		    			for(var i = 0;i < jsondata.length; i++ ){
            		    				//this.td.push( response.data.td[k] );
            		    			    this.li.push(jsondata[i]);
            		    			}
            		    		},function(response){
            		    			alert("加载出错！")
            		    		});	 
            		    	 }
            		     }
            		     
            		  } 
            	  }
              },
              {
            	  path : "/two",
            	  components : {
            		  default : {
            			  template : "<div style='border:2px solid orange; padding:15px; background:f7f7f7; position:relative;' ><ul class='list-group' style='margin:0;'><li v-for='valueli in li' class='list-group-item'>{{ valueli }}</li></ul><div class='loading'  v-if='loading' style='width:200px; margin:0 auto; padding:10px; border-radius:10px; border:1px solid orange;   background: orange; color:#fff;'>Loading...</div></div>",
             		      data: function(){
            		    	 return {
            		    		 loading: true,
            		    	     li: [],
            		    	     error: null
            		    	 }
            		     },
            		     created :function(){
            		    	 this.fetchData();
            		     },
            		     methods:{
            		    	 fetchData:function(){
            		    	    this.loading = true; //显示加载中
            		     		this.$http({
            		    			url : "getlist.php",  //发送地址
            		    			method: "post",  //发送方法
            		    			body: {   //发送参数 不带尾巴 适合post
            		    				"token" : "15819588170"
            		    			},
            		    			emulateJSON:true	  //局部开启 post方式必须开启cont-type
            		    		}).then(function(response){
            		    			this.loading = false; //关闭加载中
            		    		    var jsondata  =  JSON.parse(response.data);  
            		    			for(var i = 0;i < jsondata.length; i++ ){
            		    				//this.td.push( response.data.td[k] );
            		    			    this.li.push(jsondata[i]);
            		    			}
            		    		},function(response){
            		    			alert("加载出错！")
            		    		});	 
            		    	 }
            		     }
            		  } 
            	  }
              },
              {
            	  path : "/three",
            	  components : {
            		  default : {
            			  template : "<div style='border:1px dashed red; padding:15px; background:#000; color:#fff;' >three</div>"
            		  } 
            	  }
              } 
          ]	
});


var app = new Vue({
	el: "#app",
	router : luyou,
	data : {
		message : "vue-router 数据加载的学习"
	}
});




</script>